<template>
    <div>
        <u-popup :show="show" :round="16" mode="bottom" @close="close">
            <div class="user-manage-mian" :style="{ height: isMore ? '680px' : '380px' }">
                <div class="user-manage-header">
                    <span v-if="isMore" @click="isMore = false"><i class="down-icon"></i><i class="up-icon"></i> </span>
                    <span v-else @click="isMore = true"> <i class="up-icon"></i><i class="down-icon"></i></span>
                    用户管理 <i class="reload-icon" @click="onRefresh"></i>
                </div>
                <ul class="tab">
                    <li :class="{ active: activeTab === 'online' }" @tap="activeTab = 'online'; onRefresh()">
                        在线({{ onlineList.length }})</li>
                    <li :class="{ active: activeTab === 'forbidden' }" @tap="activeTab = 'forbidden'; onRefresh()">
                        已禁言({{
            unAllowList.length }})</li>
                </ul>
                <scroll-view refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="onRefresh"
                    @scrolltolower="scrolltolower" scroll-y scroll-with-animation>
                    <div class="user-list" v-if="activeTab === 'online'">
                        <div class="tab-content" :key="item.userId" v-for=" item in onlineList">
                            <div class="user-info-box">
                                <img :src="item.avatar" alt="">
                                <div class="user-info-content">
                                    <div class="user-info flex-center-between">
                                        <div class="user-title flex-align-center">
                                            <div class="user-name">{{ item.nickname }} </div><span class="flex-center ">
                                                <i></i>
                                                在线</span>
                                        </div>
                                        <div class="time">观看时长：{{ secondsToHMS(item.liveWatchDuration) }}</div>
                                    </div>
                                    <div class="flex-center-between">
                                        <div class="invite">
                                            <span v-if="item.inviterNickname"> 邀请人：{{ item.inviterNickname }}</span>
                                        </div>
                                        <div class="area">{{ item.ipAddress }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="user-tags">
                                <div> 标签：</div>
                                <div class="user-tags-list">
                                    <span v-for="tag in item.tagNames" :key="tag.tagId"
                                        :style="{ color: tag.tagTextColor, backgroundColor: tag.tagBg }">{{ tag.name
                                        }}</span>
                                </div>
                            </div>
                            <div class="user-action">
                                <div class="user-action-item" @click="createTags(item)">
                                    <i class="tag-icon"></i>
                                    <div>标签</div>
                                </div>
                                <div class="user-action-item" @click='reply(item)'>
                                    <i class="reply-icon"></i>
                                    <div>回复</div>
                                </div>
                                <div class="user-action-item"
                                    @click="item.forbid ? allowComment(item) : unAllowComment(item)">
                                    <i :class="[item.forbid ? 'unforbid-icon' : 'forbidden-icon']"></i>
                                    <div>{{ item.forbid ? '解除禁言' : '禁言' }} </div>
                                </div>
                            </div>
                        </div>
                        <u-empty v-if="!onlineList.length" text="暂无数据" icon="https://vlive-static.vlebo.cn/empty.png" />
                    </div>
                    <div class="user-list" v-else>
                        <div class="tab-content" :key="item.userId" v-for=" item in unAllowList">
                            <div class="user-info-box">
                                <img :src="item.avatar" alt="">
                                <div class="user-info-content">
                                    <div class="user-info flex-center-between">
                                        <div class="user-title">
                                            <div class="user-name m-b-4">{{ item.nickname }} </div>
                                            <div class="time">禁言时间：{{ item.forbidTime }}</div>
                                        </div>
                                        <div class="user-unforbidden" @click="allowComment(item)">
                                            <i class="unforbidden-icon"></i> 解除禁言
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="user-tags">
                                <div> 标签：</div>
                                <div class="user-tags-list">
                                    <span v-for="tag in item.tagNames" :key="tag.tagId"
                                        :style="{ color: tag.tagTextColor, backgroundColor: tag.tagBg }">{{ tag.name
                                        }}</span>
                                </div>
                            </div>
                        </div>
                        <u-empty text="暂无数据" v-if="!unAllowList.length"
                            icon="https://vlive-static.vlebo.cn/empty.png" />
                    </div>
                </scroll-view>
            </div>
            <u-popup :round="8" :show="editTagsModal" mode="center" :closeOnClickOverlay='false'>
                <div class="edit-tags">
                    <div class="edit-tags-title">帖标签 <i class="close-icon" @click="editTagsModal = false"></i></div>
                    <div class="edit-tags-info">
                        <span v-for="tag in tagList" @click="changeTag(tag.tagId)"
                            :class="[tagsId.includes(tag.tagId) ? 'active' : '']" :key="tag.tagId">{{
            tag.name
        }}</span>
                    </div>
                    <div class="edit-tags-action">
                        <span @tap='editTagsModal = false'>取消</span>
                        <span @tap="createUserTag">确定</span>
                    </div>
                </div>
            </u-popup>
        </u-popup>

        <!-- <u-popup :show="userShow" :round="16" mode="bottom" @close="close">

        </u-popup> -->

    </div>
</template>

<script>
import { getOnlineList, unAllowCommentUserList, getTagList, createUserTag, allowComment, unAllowComment } from '@/api/live'
import liveInfo from '@/mixins/liveInfo'
import { secondsToHMS } from '@/utils/tools.js'
import EventBus from '@/utils/eventBus'
export default {
    data() {
        return {
            currentUser: null,
            secondsToHMS,
            userShow: false,
            isMore: false,
            editTagsModal: false,
            show: false,
            activeTab: 'online',
            triggered: true,
            onlineList: [],
            unAllowList: [],
            tagList: [],
            tagsId: []
        }
    },
    mixins: [liveInfo],
    mounted() {
        this.getOnlineList();
        this.getUnAllowCommentUserList();
        this.getTagList()
    },
    methods: {
        reply(item) {
            this.show = false
            EventBus.$emit('reply', item)
        },
        async allowComment(item) {
            await allowComment({ liveId: this.mix_liveId, userId: [item.userId] });
            this.onRefresh()
        },
        async unAllowComment(item) {
            await unAllowComment({ liveId: this.mix_liveId, userId: item.userId });
            this.onRefresh()
        },
        changeTag(id) {
            const index = this.tagsId.indexOf(id);
            index > -1 ? this.tagsId.splice(index, 1) : this.tagsId.push(id);
        },
        createTags(item) {
            this.currentUser = item;
            this.tagsId = item.tagNames.map(item => item.tagId)
            this.editTagsModal = true
        },
        async createUserTag() {
            await createUserTag({
                tagIds: this.tagsId,
                tagType: 1,
                userId: this.currentUser.userId
            })
            this.editTagsModal = false
            this.onRefresh()
        },
        async getTagList() {
            const { list } = await getTagList()
            this.tagList = list
        },
        async getUnAllowCommentUserList() {
            const list = await unAllowCommentUserList({ liveId: this.mix_liveId, page: 1, pageSize: 999 }).finally(() => {
                this.triggered = false;
            })
            this.unAllowList = list
        },
        async getOnlineList() {
            const { list } = await getOnlineList({ liveId: this.mix_liveId }).finally(() => {
                this.triggered = false;
            })
            this.onlineList = list

        },
        onRefresh() {
            this.triggered = true;
            this.activeTab === 'online' ? this.getOnlineList() : this.getUnAllowCommentUserList()
        },
        close() {
            this.show = false
            this.userShow = false
        },
        // 滚动到底部加载更多
        scrolltolower(e) {
            // uni.showToast({
            //     title: '已到底',
            //     icon: 'none',
            // })
        },

    }
}
</script>

<style lang="scss" scoped>
::v-deep .u-modal__content__text {
    text-align: center;
}

::v-deep .u-textarea__count {
    background: transparent !important;
    bottom: 8px;
}

.m-b-4 {
    margin-bottom: 4px;
}

.flex-center-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-align-center {
    display: flex;
    align-items: center;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-list {
    min-height: 200px;
}

.u-empty {
    margin-top: 100px !important;
}

.user-manage-header {
    margin-top: 16px;
    font-weight: 600;
    font-size: 16px;
    color: #464C5B;
    line-height: 22px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    span {
        position: absolute;
        left: 16px;
        top: -6px;
        display: flex;
        flex-direction: column;

        i {
            margin-bottom: -12px;
        }
    }

    .reload-icon {
        position: absolute;
        right: 16px;
    }

}

.edit-tags {
    padding: 14px 16px 18px;
    width: 326px;


    .edit-tags-title {
        position: relative;
        font-weight: 600;
        font-size: 18px;
        color: #1D2129;
        line-height: 25px;
        text-align: center;
        margin-bottom: 24px;

        i {
            position: absolute;
            right: 0;
        }
    }

    .edit-tags-info {
        display: flex;
        flex-wrap: wrap;

        span {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 20px;
            padding: 0 6px;
            border-radius: 11px;
            margin-right: 10px;

            font-size: 12px;
            background: #EDECEC;
            color: #8C8C8C;
            margin-bottom: 12px;

            &.active {
                background: #295EFF;
                color: #FFFFFF;
            }
        }
    }

    .edit-tags-action {
        margin-top: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        span {
            width: 138px;
            height: 38px;
            background: #FFFFFF;
            border-radius: 23px;
            border: 1px solid #295EFF;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #295EFF;
            line-height: 24px;

            &:last-of-type {
                background: #295FFF;
                color: #fff;
            }

        }
    }
}

.user-manage-mian {

    position: relative;

    .tab {
        display: flex;
        justify-content: center;
        padding: 16px 0 6px;
        border-bottom: 1px solid #AEC0FE;


        li {
            font-size: 14px;
            color: #8F969E;
            line-height: 22px;

            &:last-of-type {
                margin-left: 100px;
            }

            &.active {
                position: relative;
                font-weight: 500;
                font-size: 16px;
                color: #295EFF;

                &::before {
                    position: absolute;
                    left: 9px;
                    bottom: -6px;
                    content: '';
                    width: 44px;
                    height: 2px;
                    background: #295EFF;
                    border-radius: 1px;
                }

            }
        }
    }


}

.user-info-box {
    display: flex;
    margin-bottom: 10px;

    img {
        width: 38px;
        height: 38px;
        border-radius: 38px;
        margin-right: 8px;
    }

    .user-info-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .user-unforbidden {
        display: flex;
        align-items: center;
        font-size: 11px;
        color: #295EFF;

        i {
            margin-right: 2px;
        }

    }

    .user-info {
        .user-title {

            .user-name {
                max-width: 98px;
                font-weight: 400;
                font-size: 14px;
                color: #1D2129;
                white-space: nowrap;
                /* 不换行 */
                overflow: hidden;
                /* 隐藏溢出的内容 */
                text-overflow: ellipsis;

            }

            span {
                width: 40px;
                height: 16px;
                background: #00CC66;
                border-radius: 11px;
                margin-left: 6px;
                font-size: 10px;
                color: #FFFFFF;

                i {
                    border-radius: 4px;
                    margin-right: 4px;
                    width: 4px;
                    height: 4px;
                    background: #FFFFFF;
                }

            }
        }


    }

    .time {
        font-weight: 400;
        font-size: 10px;
        color: #657180;
    }

    .area {
        font-size: 10px;
        color: #464C5B;
    }

    .invite {
        display: flex;
        width: 90px;
        height: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 10px;
        color: #657180;
    }
}

.user-tags {
    font-weight: 400;
    font-size: 10px;
    color: #8C8C8C;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0 6px;
    margin-bottom: 8px;

    .user-tags-list {
        flex: 1;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    span {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 17px;
        font-weight: 400;
        padding: 0 6px;
        border-radius: 11px;
        font-size: 12px;
        color: #FFFFFF;
        background: rgba(0, 221, 186, 1);
        margin-right: 6px;
    }
}

.user-action {
    display: flex;

    .user-action-item {
        margin-right: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 10px;
        color: #657180;
        line-height: 14px;

        i {
            margin-bottom: 3px;
        }
    }
}

.tab-content {
    padding: 16px;
    border-bottom: 1px solid #AEC0FE;
}
</style>